<template>
  <div class="tactics">
    <div class="topHandleCon">
      <el-row :gutter="10">
        <el-col :span="10">
          <el-row
            :gutter="10"
            class="noBorderSelect"
          >
            <el-col :span="11">
              <el-card :body-style="{padding:0}">
                <el-row>
                  <el-col :span="8">
                    <span class="spanBorder">共享策略</span>
                  </el-col>
                  <el-col :span="16">
                    <el-select
                      v-model="param.type"
                      clearable
                      size="mini"
                      @change="handleGetDictList"
                    >
                      <el-option
                        v-for="item of userType"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      />
                    </el-select>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <!-- <el-col :span="11">
              <el-card :body-style="{padding:0}">
                <el-row>
                  <el-col :span="8">
                    <span class="spanBorder">控制策略</span>
                  </el-col>
                  <el-col :span="16">
                    <el-select
                      v-model="param.enabledmark"
                      size="mini"
                      @change="handleGetDictList"
                    >
                      <el-option
                        v-for="item of controlType"
                        :key="item.encode"
                        clearable
                        :value="item.encode"
                        :label="item.name"
                      />
                    </el-select>
                  </el-col>
                </el-row>
              </el-card>
            </el-col> -->
          </el-row>
        </el-col>
        <el-col
          :span="14"
          class="greenBtnW"
        >
          <el-row class="show-operate">
            <search
              v-model="param.name"
              :show-btn="false"
              placeholder="数据编码/名称"
              style="margin-right: 10px"
              @btnClick="handleGetDictList"
            />
            <div
              v-if="showOperate"
              class="greenBtn"
              style="width: 60px; margin-right: 10px; min-width: 60px"
              @click="showAddData('edit')"
            >修改</div>
            <span class="fresh">
              <span @click="refresh">
                <i class="el-icon-refresh" />
              </span>
            </span>
            <!-- <el-col
              v-if="showOperate"
              class="txtR"
              :span="3"
            >
              <div>
                <div
                  class="greenBtn"
                  @click="showAddData('add')"
                >新增</div>
              </div>
            </el-col> -->

            <!-- <el-col
              class="txtR"
              :span="3"
            >
              <div>
                <div
                  v-if="showOperate"
                  class="greenBtn"
                  @click="deleteConfirm"
                >删除</div>
              </div>
            </el-col> -->
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div />
    <div class="tableCon paddingLeft">
      <div class="leftList">
        <p>数据类型</p>
        <ul>
          <li
            v-for="type in module"
            :key="type.phid"
            :class="{ active: param.module === type.phid }"
            @click="handleClickType(type)"
          >{{ type.name }}</li>
        </ul>
      </div>
      <div class="tableShadow">
        <el-table
          ref="multipleTable"
          :data="tableData"
          height="100%"
          tooltip-effect="dark"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            width="80"
            header-align="center"
            align="center"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <el-checkbox
                v-model="checkedAll"
                :newname="scope.$index "
                @change="checkedAllFn"
              >序号</el-checkbox>
            </template>
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.checked"
                @change="rowChange"
              >{{ scope.$index+1 }}</el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item,index) in columnList"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width||''"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="姓名"
            width="180"
          >
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>{{ scope.row.name }}</p>
                <!-- <p>住址: {{ scope.row.address }}</p> -->
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageArea">
        <el-pagination
          :current-page.sync="param.current"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="param.size"
          :total="param.total"
          layout="total,sizes,prev,pager,next,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      v-if="addUserShow"
      :close-on-click-modal="false"
      :title="addUserType==='add'?'新增用户':addUserType==='update'?'修改用户':'账号移交'"
      :visible.sync="addUserShow"
      custom-class="addUserCss"
      width="1100px"
      append-to-body
    />
    <el-dialog
      v-if="addDataShow"
      :close-on-click-modal="false"
      :title="addDataType==='add'?'数据新增':'数据修改'"
      :visible.sync="addDataShow"
      custom-class="addUserCss"
      width="678px"
      append-to-body
    >
      <add-data
        :type="addDataType"
        :detail="addDataDetail"
        @close="finishAdd"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getDictList, deleteDict } from '@/api/dataCenter'
import { USER_TYPE, CONTROL_TYPE, MODULE_LIST, MAP_USER_TYPE, DEFAULT_MODULE } from './constants'
import search from '@/components/searchInput'
import addData from './addData'
import { mapState } from 'vuex'
export default {
  name: 'UserManage',
  components: {
    search,
    addData
  },
  data() {
    return {
      module: MODULE_LIST, // 策略类型列表
      param: {
        current: 1,
        size: 10,
        total: 0,
        module: DEFAULT_MODULE, // 当前选中的策略类型
        enabledmark: '',
        type: '',
        name: ''
      },
      tableData: [], // 表格数据
      addDataType: '',
      addDataDetail: null,
      addDataShow: false,
      userRuleShow: false, // 角色授权弹窗
      addUserShow: false,
      addUserType: 'add',
      userInfo: [], // 选中的数据
      controlType: CONTROL_TYPE,
      userType: USER_TYPE,
      checkedAll: false, // 全选
      columnList: [{
        prop: 'encode',
        label: '数据编码'
      }, {
        prop: 'name',
        label: '数据名称'
      }, {
        prop: 'typeName',
        label: '共享策略'
      },
      //  {
      //   prop: 'mobilephone',
      //   label: '控制策略(忽略)'
      // },
      {
        prop: 'description',
        label: '备注'
      }]
    }
  },
  computed: {
    ...mapState({
      orgId: state => state.user.orgId,
      userid: state => state.user.userid,
      usertype: (state) => {
        return state.user.usertype
      }
    }),
    showOperate() {
      console.log(this.usertype)
      return [3, 2].includes(this.usertype)
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    handleGetDictList() {
      getDictList({ ...this.param }).then(({ data: { total, records }}) => {
        this.tableData = records.map(record => ({
          ...record,
          typeName: MAP_USER_TYPE[record.type] || '暂无',
          checked: false
        }))
        this.param.total = total
      }).catch(() => {
        this.$msgBox.error('获取策略列表失败')
      })
    },
    showAddData(type) {
      this.addDataType = type
      const checkedData = this.handleGetCheckedData()
      if (type === 'add') {
        if (checkedData.length > 1) {
          this.$msgBox.error('只能选择一个或不选')
          return
        }
        this.addDataDetail = {
          orgId: this.$store.state.user.orgId,
          module: this.param.module,
          parentId: checkedData.length ? checkedData[0].phid : 0
        }
      } else {
        if (!checkedData.length) {
          this.$msgBox.error('请选择要修改的数据!')
          return
        }
        if (checkedData.length > 1) {
          this.$msgBox.error('只能选择一个要修改的数据!')
          return
        }
        const sysManagerEditType = [1, 2].includes(checkedData[0].type)
        if (sysManagerEditType && ![2, 3].includes(this.usertype)) {
          this.$msgBox.error('该数据只能由系统管理员、平台管理员进行编辑')
          return
        }
        this.addDataDetail = {
          ...checkedData[0],
          orgId: this.$store.state.user.orgId,
          module: this.param.module
        }
      }
      this.addDataShow = true
    },
    handleSizeChange(val) {
      this.param.size = val
      this.handleGetDictList()
    },
    handleGetCheckedData() {
      return this.tableData.filter(v => v.checked)
    },
    handleCurrentChange(val) {
      this.pageindex = val
      this.handleGetDictList()
    },
    // 选择
    handleClickType({ phid }) {
      this.param.module = phid
      this.handleGetDictList()
      // const data = {
      //   // enabledmark:
      //   // this.search.enabledmark === 5 ? '' : this.search.enabledmark,
      //   // keys: this.search.value,
      //   // "order": "string",
      //   pageIndex: this.pageindex,
      //   pageSize: this.pagesize,
      //   // "sort": "string",
      //   dataName: this.search.value,
      //   parentid: item.encode
      // }
    },
    checkedAllFn(bool) {
      // 全选
      this.tableData.forEach(tab => {
        this.$set(tab, 'checked', bool)
      })
    },
    rowChange() {
      // 改变行
      this.checkedAll = this.tableData.every(table => {
        return table.checked
      })
    },

    // 删除确认
    deleteConfirm() {
      const checkedData = this.handleGetCheckedData().map(v => v.phid)
      if (checkedData.length === 0) {
        this.$msgBox.error('请选择要删除的用户!')
        return
      }
      this.$confirm(
        '确定继续删除吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async() => {
        this.deleteUser({ ids: checkedData })
      }).catch(err => {
        console.error(err)
      })
    },
    // 删除
    deleteUser(data) {
      deleteDict(data).then(res => {
        if (res.status) {
          this.$msgBox.error('删除成功!')
          this.handleGetDictList()
        } else {
          this.$msgBox.error(res.message)
        }
      }).catch(err => {
        console.log(err)
        this.$msgBox.error('删除失败!')
      })
    },
    refresh() {
      this.handleGetDictList()
    },
    getTableList(data) { // 列表数据
      getDictList(data).then(res => {
        if (res.status) {
          this.tableData = res.data.records
          this.tableData.forEach(item => {
            this.$set(item, 'checked', false)
          })
          this.total = res.data.total
        } else {
          this.$msgBox.error(res.message)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    finishAdd(bool) { // 完成或取消新增修改 ,true完成
      if (bool) {
        this.handleGetDictList()
      }
      this.addDataShow = false
    },
    handleSelectionChange() { }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.tactics {
  min-width: 1250px;
  height: 100%;
  padding: 8px 0;
  overflow: hidden;
  position: relative;
}
.topHandleCon {
  padding: 0 20px;
  margin-top: 5px;
}
.noBorderSelect >>> .el-select {
  width: 100%;
  input {
    border: 0;
  }
}
.spanBorder {
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 20px;
  margin-top: 4px;
  text-align: center;
  border-right: 1px solid $borderGray;
}
.greenBtnW {
  text-align: right;
  .greenBtn {
    margin: 0;
  }
  .fresh {
    height: 30px;
    line-height: 30px;
    font-size: 22px;
    text-align: center;
    cursor: pointer;
    color: #666;
    display: inline-block;
  }
}
.tableCon {
  padding: 20px;
  padding-bottom: 70px;
  height: 100%;
  // position: relative;
  >>> .el-table--border {
    border: 0;
  }
  >>> .el-table::before {
    height: 0;
  }
  >>> .el-table::after {
    width: 0;
  }
  >>> .has-gutter tr > th:nth-last-of-type(2) {
    border-right: 0;
  }
}
.tableShadow {
  width: 100%;
  height: 100%;
  padding: 8px;
  box-shadow: 0 0 5px 3px #ddd;
  border-radius: 5px;
  overflow: hidden;
}
.paddingLeft {
  padding-left: 290px;
  .leftList {
    width: 250px;
    float: left;
    margin-left: -270px;
    height: 100%;
    box-shadow: 0 0 5px 3px #ddd;
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
    > p {
      background: $green;
      height: 40px;
      line-height: 40px;
      color: #fff;
    }
    ul {
      > li {
        color: $btn_blue;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        &:hover {
          background: #98c9f580;
        }
        &.active {
          cursor: default;
          background: #98c9f580;
        }
      }
    }
  }
}
.pageArea {
  position: absolute;
  right: 90px;
  bottom: 5px;
}
.show-operate {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
<style lang="scss">
@import "@/styles/variables.scss";
.addUserCss {
  .el-dialog__header {
    background: $green;
    .el-dialog__title {
      color: #fff;
    }
  }
  border-radius: 10px;
  overflow: hidden;
}
</style>
